#css cursor

[dolphinrostrums]

love when i wake up to see an update happened to make a few vencord plug-ins break, but i check the vencord updater tab and see there's already fixes for my favorite ones just waiting for me to update <2 i love you vencord i love you customization of personal experiences i love you not giving massive corporations that are enshittifying their products money they don't deserve

[divinector]

Eyes Follows Mouse Cursor

[westmansion]

coding again moodboard

[around-your-throat]

keep forgetting i can't add videos in a reblog akfhskfhds;lfs anyway here's her in action.

[digital-chance]

Neocities Websites for Decor (& Other Resources)

9/4 2:10pm

i've been working on my neocities website and wanted to compile a bunch of places where one can find decor. this is not an extensive list, but rather a bunch of places where you can start finding resources.

please note that various pages could strain the eyes, including flashing lights or colors. pages called 'blinkies' usually have flashing colors throughout. [* = prominent flashing lights]

all websites, resources, and thoughts are beneath the cut

decor

effects for mouse cursors, text, and sites - https://www.mf2fm.com/rv/

assorted decor, images, and more - https://shishka.neocities.org/shishka/toybox

* random gifs from the internet archive - https://gifcities.org

https://pinkukingdom.neocities.org/toybox

http://whimsical.heartette.net/material [has tos you need to follow]

https://cinni.net/?z=/toybox/ [love this website so much]

* assorted early internet graphics - https://www.glitter-graphics.com

https://graphic.neocities.org

https://strawberry-gashes.gensoukai.net/v2/

archived images - https://web.archive.org/web/20100211160439/http://neskaya.net/pixels.php

* https://kawaiiness.net/home.php [potential eye strain]

https://www.asterism-m.com/item/ [japanese site]

https://pixelsafari.neocities.org

https://foollovers.com/mat/index.html [japanese site. has tos]

* https://gothiclolita.neocities.org/materials

https://sozai.pooftie.me [pastels. very low contrast, hard to read warning]

https://scripted.neocities.org

https://arunyi.art/#goodies

https://nonkiru.art/resources

* https://animatedglittergraphics-n-more.tumblr.com / @animatedglittergraphics-n-more

https://drive.google.com/drive/folders/1eQx_UiPvEvI4ZZECoPOuRrLhIE_6XbBy [content guide here... 4k+ gifs and graphics by @topadie]

* https://cutewebgraphics.tumblr.com/directory / @cutewebgraphics

https://pngfarm.tumblr.com / @pngfarm

https://lostsozai.tumblr.com / @lostsozai

decor directories

https://directory.cinni.net/sozai/

https://pixelsafari.neocities.org/links/directory/

https://www.tumblr.com/gender444/680981849679511552/favorite-sozaiblog-materials-sites-fool-lovers

definitions

(for those who don't know and/or are just getting into website creation)

webmaster: person who coded/created the website

favicons: small icons or graphics, usually 16x16 pixels.

pixels: graphics either custom-made or found. i've seen this term used for favicons, adoptables, and other graphics.

emoticons: old term for emojis. typically custom emoji expressions

* blinkies: thin flashing or sparkling banners, usually with text, an image, and flashing lights. collectible.

toybox: collections of favicons, stamps, blinkies, buttons, and more. all up to the webmaster's discretion and preferences

* glitters: glittering or shimmering text or images

stamps: collectible rectangular images, usually 99x56px

buttons: images that are hyperlinked to other websites. often custom-made for one particular webmaster or site.

avatars: typically 100x100 pixel images

other websites

beginner's guide to html and css - https://webguide.neocities.org

dnd style character generator - https://harlekine.neocities.org

templates/themes - https://neothemes.neocities.org

photo editor - https://photomosh.com

rainbow text maker - https://www.glitter-graphics.com/generators/rainbow.php

various other resources - https://scripted.neocities.org

learn more about websites & neocities - https://sadgrl.online

assorted resources - https://www.tumblr.com/punkwasp/725206601551773696/neocitiesindie-webmastery-resources

get started with website creation - https://www.tumblr.com/oddmerit/685644129978499072/note-cause-im-getting-sick-and-tired-of-terfs

all types of resources - https://punkwasp.leprd.space/resources/

* = prominent flashing lights/colors

i suggest not linking back (aka hotlinking) to the resources on the website. instead upload it yourself onto either neocities or an image hosting site and include credit. this way, if the person hosting the image deletes their page or loses the image somehow, your website will still be fine. (i didn't do this and had to find everything all over again... )

i have found that the best websites to use as companions to neocities are w3schools, pinterest, tumblr, and any image hosting site. w3schools for coding tutorials. pinterest for inspiration or for graphics. tumblr for any type of decor and advice. to edit my code and have a live preview, i use codepen.io.

since you read through all this, maybe take a look at my neocities site and follow me! <3

[pottedbasil]

Hey!

I made some cursors for the romanceable characters!

Get them here for free: x

And if you want them for your tumblr blog. See below!

How to add your blorbo on your blog:

Edit your tumblr theme

Scroll down and click 'Advanced options'

Paste any of the following below on the 'ADD CUSTOM CSS'

Adeline

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/cebfe4e501f3f3d5a3318bb19b628ea9/7b313a406e2b99c3-76/s75x75_c1/5c2dbe228be79a956bafee68f5af5bd843f8e242.pnj), auto; }

Celine

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/e62f93a39a280df94d46c371a2d82773/7b313a406e2b99c3-a3/s75x75_c1/5119049cc52305eb7096e54b732513a61ac76270.pnj), auto; }

Juniper

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/0898acc118e4594ed6f338cffaf4dc1d/7b313a406e2b99c3-87/s75x75_c1/6e5405c753f8c810d47a0e2cb579163eb9db1463.pnj), auto; }

Reina

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/e711e91ff84bb00e9bcb0441f6f4191c/7b313a406e2b99c3-05/s75x75_c1/33f03044f6807b522b0a627ba377e5886757ee09.pnj), auto; }

Valen

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/331f8d17b206d49a8e638d697e41f437/7b313a406e2b99c3-92/s75x75_c1/e81fade7017223d83abcc4b0793bf7cd64ba20fe.pnj), auto; }

Balor

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/a43c00912490a9e8bb9ce4a3437290fd/7b313a406e2b99c3-8c/s75x75_c1/ecfffe4fb610e6172aebc87975b6b0f68bf68561.pnj), auto; }

Caldarus

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/a8fb9ce48e2d60c02790b25eed9512bc/7b313a406e2b99c3-12/s75x75_c1/71807760964b40a8678349de53ab9b06d98a9156.pnj), auto; }

Eiland

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/545485a1729d330b95492042aea09807/7b313a406e2b99c3-f9/s75x75_c1/826a71b3988ffc48fdf94e6ba8068e6a4187b4ba.pnj), auto; }

Hayden

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/b74876dfddff5ea8781caf303a1df2dc/7b313a406e2b99c3-e5/s75x75_c1/f0e15a108a70f3a24c6f89978999f1957fcc67dd.pnj), auto; }

March

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/b767223f9d14864cefb67e2f0d4650e3/7b313a406e2b99c3-64/s75x75_c1/f10af51b4655afe440952392076437eadd9348e4.pnj), auto; }

Ryis

body, *, a, a:hover { cursor:url(https://64.media.tumblr.com/355392baeb312090763c2950995af81b/7b313a406e2b99c3-2a/s75x75_c1/5eb7d4ea417826b15f3fb2f27cee627ed1f49433.pnj), auto; }

[ultraviollettt]

Theres a way to do this with workskins! If you go to make a workskin on ao3, and then paste in this:

* { user-select: none; }

and then add that workskin to your fic, the text won't be able to be copied, and still works for screenreaders (at least the one I tested it with).

This can be turned off easily by disabling the creators style, but if the plagarists can't figure it out it would probably deter them well enough.

As annoying as it probably would be, I wonder if AO3 would allow special HTML to prevent copy-paste of my works. There are ways around it but it might just deter lazy content thieves

[mineyrella]

So I created an ao3 skin and I would like to share it for anyone who wants to use it 💞

Here’s the code >>>

•Wizard Settings

Can be overridden by custom CSS :

Background color:

#FCEBFC

Text color:

#AF7E98

Header color:

#B34A81

Accent color:

#EABEE4

•CSS:

:root {

--background-color: #f9e3f2;

--text-color: #4d494a;

--form-background: #fdeff5;

}

body {

font-family: sans-serif;

}

.wrapper {

background-color: white;

border: 2px solid #f3c2e3;

}

#header {

padding: 10px;

margin-bottom: 15px;

}

#header a {

text-decoration: none;

}

#header a:hover {

text-decoration: underline;

}

#header ul.navigation.actions.user.signed-in {

display: flex;

justify-content: flex-end;

padding: 10px;

}

#main {

padding: 20px;

}

.heading {

padding: 8px;

margin-bottom: 10px;

font-weight: bold;

}

input[type="text"],

input[type="date"],

textarea,

select {

border: 1px solid #f3c2e3;

padding: 8px;

margin: 5px 0;

}

input[type="radio"],

input[type="checkbox"] {

margin-right: 5px;

}

.button,

input[type="submit"],

button {

border: none;

padding: 10px 20px;

cursor: pointer;

border-radius: 4px;

margin-bottom: 5px;

}

.button:hover,

input[type="submit"]:hover,

button:hover {

background-color: #e687b0;

}

#new_work_form .actions .button {

border: none;

padding: 10px 20px;

margin: 5px 5px 5px 0;

cursor: pointer;

border-radius: 4px;

}

.actions .button.current {

border: none;

padding: 10px 20px;

margin: 5px 5px 5px 0;

cursor: pointer;

border-radius: 4px;

}

#work_search_form .submit .button {

border: none;

padding: 10px 20px;

margin: 5px 0;

cursor: pointer;

border-radius: 4px;

}

#work_search_form .submit .button:hover {

background-color: #e687b0;

}

I decided to write it down for easier access🌸

I’ll leave a Reddit link below ⬇️ that explains how to use the code if it’s your first time easily. Credit to @tired-library-ghost on Reddit for this amazing explanation ❤️

[merlyn-bane]

embedding images on ao3 (or at least how i do it)

step one - create a work skin

this is step is optional, technically, but it'll make for better viewing across different devices. go to your ao3 dash, and on the left menu (or the top menu if you're on mobile) you're going to click on 'skins'. click on 'my work skins', and then click on 'create work skin'. make sure that the type says work skin, and then put in a title. this is just for you, so it doesn't really matter what it is. then in the css box, you're going to copy and paste this exactly:

#workskin img {

max-width: 100%;

height: auto;

}

save it.

step two: host your image

you can't actually host images on ao3, and i don't recommend hosting them on tumblr either. you need a static link for the image and tumblr's are always subject to change. ive never been able to get drive to work for this either but that might just be user error, idk. when i need something hosted for ao3, i use dropbox personally. from here, the instructions are going to be with that in mind, other image hosters might be different.

upload your image and copy the permanent link.

step three: put your image in your wip

in your ao3 wip, scroll down to 'select work skin' and click on the skin that you made earlier

in the text editor itself, make sure that you have it set to rich text rather than html. place your cursor within the editor where you want the image to go and then click on insert/edit image. in the menu that comes up, you're going to paste your image link. if you're using dropbox to host, you have to change the dl=0 at the end of the link to raw=1. i'm not sure if this applies with other image hosters.

if you want to adjust the size of your image in this menu, make sure that the proportions are locked. there will be a little lock icon next to the width and height boxes. i usually size mine at around 750 to 800 on the longest/widest side but this piece is totally up to you. you can also click and drag the image size within the text editor itself, but if the image is very big this may be more difficult.

step four: profit

(for legal reasons this is a joke. thou shalt not profit from fanworks lest ip holders decide to get litigious)

[thecozycat]

🧡 Tuesday Tips #3 🧡

Your website is more than just a collection of pages—it’s your digital home. It should reflect you, your interests, and your personality. But with so many sites out there, how do you make yours stand out?

Here are 25 ways to make your website feel more personal, unique, and personalized to you!

........................................................................................................

🎨 Design & Aesthetics

1. Custom Color Palette – Pick colors that resonate with your personality and aesthetic.

2. Unique Typography Choices – Use a mix of fonts that match your vibe.

3. Handwritten or Doodle Elements – Add personal sketches or notes.

4. Custom Cursor – Let visitors use a fun, themed cursor on your site.

5. Personalized Favicon – A tiny but powerful detail that makes your site feel complete.

6. Themed Layouts for Different Pages – Make each page visually distinct but cohesive.

7. Custom Backgrounds – Textures, gradients, or even a personal photograph.

8. Retro or Experimental CSS Styles – Go wild with unique styles that make your site stand out.

9. Create a Custom Hand-Drawn Logo – Instead of a standard logo, try sketching one yourself for a unique touch.

10. Add Subtle Animations – Small hover effects, background animations, or cursor trails can bring your site to life.

11. Play With Layering Elements – Overlap images, text, and shapes for a more dynamic look.

12. Design a Personalized Loading Screen – A custom loading animation or message adds a fun detail visitors will remember.

13. Add Your Own Handwriting as a Font – Convert your handwriting into a web font for a truly personal touch.

14. Design a Seasonal Theme Switcher – Let visitors toggle between different seasonal or mood-based color palettes.

........................................................................................................

📜 Content & Personality

15. Create a Behind-the-Scenes Page – Show how your website was built, share your thought process, or include fun bloopers.

16. Add a "The Making Of" Section – Share drafts, sketches, or early concepts behind your creative works.

17. Include a Personal Dictionary of Words You Love – A list of favorite words, phrases, or slang you frequently use.

18. Design a "Things That Make Me Happy" Page – A simple, uplifting page filled with personal joys.

19. Show Your Progress on a Learning Goal – Track and share your journey in learning a new skill, language, or hobby.

........................................................................................................

💾 Interactivity & Engagement

20. Add a Clickable Mood Indicator – Let visitors see your current mood with an emoji or phrase that changes over time.

21. Create a Dynamic Banner That Updates Automatically – Display different messages depending on the time of day or special occasions.

22. Add a "What I'm Listening To" Widget – A live-updating display of your current favorite song or playlist.

23. Embed a Poll or Voting Feature – Let visitors vote on fun topics or help you make creative decisions.

24. Introduce a Mini Personality Quiz – Something quirky like “Which of my favorite books/movies are you?”

25. Make an "Ask Me Anything" Page – An interactive page where visitors can submit questions for you to answer.

Closing: Make It Yours!

Your website should be you in digital form—fun, unique, and engaging. Whether you add just one or all 25 ideas, the most important thing is to have fun and make it your own.

If you try any of these ideas, let me know—I’d love to see what you create!

-----------------------------------------------------------------

Want to help the Small Web movement grow?

Join us on other platforms. ♥

FB Page & Group:

facebook.com/thesmallweb

facebook.com/groups/thesmallweb

Twitter/X:

x.com/smallweblove

Tumblr Community:

tumblr.com/communities/thesmallweb

Mastodon:

indieweb.social/@thesmallweb

[sanchoyo]

boooo ive spent like 3 hours trying to install the drivers for the gd usb wifi adapter :/ it installed just fine on this desktop when it was on windows so it cant be a hardware problem i dont think...and the disk HAS a linux version for installation included!! I literally havent had to go to a tech forum and type a question in So Long. this is So Embarrassing. but we will figure it out 😔

so my sister received a MASSIVE ancient desktop computer from our grandfather and she doesnt want it (tiny apartment. big Old Computer. already has laptop/tablets etc) so she gave it to me. and i had the idea that id install games and blender on it (like, heavier programs) and use my laptop for more work related things and keep it lighter (if i can snag a remote job yk...)

but this Big Old Desktop computer. its on windows 7 which. is NOT compatible with the newest version of blender :( (and all the tutorials i need to follow do use the newest versions...) and like. windows 10/11 would cost money to get a product key for (or more time trying to pirate it than I want to spend honestly) ...and since I already have a working laptop I figure its fine if I use the desktop one to fuck around right? nbd if I do smth wrong bc I can fall back on my laptop or do a system wipe on the desktop. so. going to try LINUX for the first time instead of a windows system :3 very excited bc ive wanted to try it forever. penguine time

[divinector]

Eyes Follow Mouse Cursor Animation

[lavendergalactic]

hi :3 i saw on one of your entrys that you had like a custom cursor and was wondering if you could share how to do that?? thank you if you do!!!

its:

cursor: url(INSERT IMAGE URL), auto;}

!!!!! you put that in your css code

[mostlyghostly42]

webdev websites list

Web Design Free and Premium Resources - Webgyaani 

Internet History Sourcebooks Project 

Webpage archive 

Your Website Needs to Work on Phones - Kalechips 

Mobile Friendly via CSS - Dannarchy 

Clagnut by Richard Rutter 

CSS { In Real Life } 

CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets. 

90's Cursor Effects 

Web Design Museum 

Milestones Archive - The History of the Web 

All Paths | The Odin Project 

Developer Roadmaps - roadmap.sh 

XP.css - A design system for building faithful recreations of old UIs 

GTmetrix | Website Performance Testing and Monitoring 

sadgrl.online 

Peregyr Art & Design 

R.V.Klein 🐇 HOME 

lunospace 

goblin-heart.net 

Reliquarian 

Dark theme - Material Design 

32-Bit Cafe 

Cappuccicons Font 

BASIC HTML COMPETENCY IS THE NEW PUNK FOLK EXPLOSION! 

[izicodes]

Sugary Scribbles | #8

Saturday 6th January 2024

IT'S BASICALLY WORKING (on larger screens)! My never-ending war on website responsiveness continues! I have a large screen and I stupidly only took into account of MY screen size. What I did do though is created a message for phone-table sizes because it just wouldn't make sense it working on really small devices - in my opinion~! But for now I will put this on hold because I am excited about my other project idea I came up with yesterday oops~!

This is my first project of the year and it's super adorable in my opinion! It paints, it erases, it deletes and it saves your artwork! Ticks all the boxes I made at the beginning of the project! Turned a simple 'Make a HTML painting webpage' into something more cuter and cool! Job well done! 😩🙌🏾💗

You can try it out (if you have a larger screen size), all that happens is the painting will be off the mouse direction a bit, sorry!

link to the Sugary-Scribbles web app! 🍡

Lastly, here is a cool drawing I made as I was testing the site~! I'm a better artist than this I swear, just not good using a mouse...

List of resources I used during the project

Figma - to plan the webpage

Canva: to make the header

Photopea: for further photo editing

RedKetchup: to colour pick quickly

CSS Animations: to add the zoom-in-n-out animation

MDN Canvas: to know what the element does properly

YouTube Tutorial: to get inspiration and extra help

Flaticon: for the icons and cursors

Html2canvas API: to turn the drawing into an image (tutorial)

That's all, have a nice day/night and happy coding! 🖤

[teslacoils-and-hubris]

side note and not related at all- but how do you get a custom curser on your blog theme? i think its rlly neat :)

gonna be honest- not entirely sure

tumblr's changed how they did custom blog themes since the last time I updated it, and I don't really remember how I edited the theme lol

but, after a bit of poking around, I think you have to go into your settings and allow custom themes, then when you're on desktop and fully on your blog, not just the popup in the tumblr window, go to edit theme and you should be able to add your own custom css

(also wtf why is tumblr selling themes for 50 dollars???)

anyways from there it's just a matter of picking a cursor (I use this site but theres others) and adding in the code which is something like this

<style type="text/css">body { cursor: url(image data here), auto; }</style>

idk how helpful this was sorry ^^'